import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

type QueueDetail = {
	currentNo: number; // 当前接诊号
	myNo: number; // 我的排队号
	waitCount: number; // 等待人数
};

function Index() {
	const nav = useNavigate();
	const [detail, setDetail] = useState<QueueDetail>({ currentNo: 0, myNo: 0, waitCount: 0 });

	useEffect(() => {
		// 模拟数据
		setDetail({ currentNo: 15, myNo: 20, waitCount: 5 });
	}, []);

	const handleBack = () => nav(-1);
	const handleMoreOptions = () => console.log('更多');
	const handleTarget = () => console.log('目标');
	const refreshQueue = () => {
		// 模拟刷新
		console.log('刷新队列');
	};

	return (
		<div style={{ width: '100vw', minHeight: '100vh', background: '#fff' }} onClick={()=>nav('/dan')}>
			{/* 顶部导航 */}
			<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', background: '#fff', borderBottom: '1px solid #f0f0f0' }}>
				<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
					<div onClick={handleBack} style={{ fontSize: 20, cursor: 'pointer', color: '#333' }}>‹</div>
					<div style={{ fontSize: 18, fontWeight: 600, color: '#333' }}>候诊详情</div>
				</div>
				<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
					<div onClick={handleMoreOptions} style={{ fontSize: 18, cursor: 'pointer', color: '#333' }}>⋯</div>
					<div onClick={handleTarget} style={{ fontSize: 18, cursor: 'pointer', color: '#333' }}>◎</div>
				</div>
			</div>

			{/* 医生信息 */}
			<div style={{ padding: 16, display: 'flex', alignItems: 'center' }}>
				<div style={{ width: 56, height: 56, borderRadius: '50%', background: '#eef6ff', display: 'flex', alignItems: 'center', justifyContent: 'center', marginRight: 12 }}>
					<span style={{ fontSize: 26 }}>👨‍⚕️</span>
				</div>
				<div style={{ flex: 1 }}>
					<div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
						<div style={{ fontSize: 18, fontWeight: 700, color: '#222' }}>刘医生</div>
						<div style={{ fontSize: 13, color: '#666' }}>主任医师</div>
					</div>
					<div style={{ marginTop: 6, display: 'flex', gap: 16, color: '#666', fontSize: 14 }}>
						<div>门诊外一科</div>
						<div>四川省保健院南苑</div>
					</div>
				</div>
			</div>

			{/* 三项统计 */}
			<div style={{ display: 'flex', margin: '0 16px', borderRadius: 12, overflow: 'hidden', boxShadow: '0 2px 8px rgba(0,0,0,0.06)' }}>
				<div style={{ flex: 1, background: '#fff7e6', textAlign: 'center', padding: '14px 0' }}>
					<div style={{ color: '#faad14', fontSize: 14 }}>当前接诊号</div>
					<div style={{ color: '#faad14', fontSize: 22, fontWeight: 700, marginTop: 6 }}>{detail.currentNo}</div>
				</div>
				<div style={{ flex: 1, background: '#e6f4ff', textAlign: 'center', padding: '14px 0' }}>
					<div style={{ color: '#1677ff', fontSize: 14 }}>我的排队号</div>
					<div style={{ color: '#1677ff', fontSize: 22, fontWeight: 700, marginTop: 6 }}>{detail.myNo}</div>
				</div>
				<div style={{ flex: 1, background: '#ffecec', textAlign: 'center', padding: '14px 0' }}>
					<div style={{ color: '#ff4d4f', fontSize: 14 }}>等待人数</div>
					<div style={{ color: '#ff4d4f', fontSize: 22, fontWeight: 700, marginTop: 6 }}>{detail.waitCount}</div>
				</div>
			</div>

			{/* 中央刷新按钮 */}
			<div style={{ display: 'flex', justifyContent: 'center', marginTop: 80 }}>
				<div onClick={refreshQueue} style={{ width: 150, height: 150, borderRadius: '50%', background: '#1677ff', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 12px 28px rgba(22,119,255,0.35)', cursor: 'pointer' }}>
					<div style={{ fontSize: 18, fontWeight: 600 }}>刷新队列</div>
				</div>
			</div>

			{/* 备注说明 */}
			<div style={{ color: '#9aa0a6', textAlign: 'center', marginTop: 60, fontSize: 12 }}>
				注：如有特殊情况，请以现场排队情况为准
			</div>
		</div>
	);
}

export default Index;


